<script>
import { routes } from "@/router/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  editPwd,
  emailNotice,
  noticeCheckStatus,
  emailNoticeDel,
  notice,
} from "@/http/api";
import calendar from "@/components/public/calendar.vue";

export default {
  components: { calendar },
  name: "",
  data() {
    const checkOld = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入旧密码"));
      } else {
        callback();
      }
    };
    const checkSure = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入确认密码"));
      } else if (this.queryParams.new_password !== value) {
        callback(new Error("确认密码与新密码不一致，请重新输入"));
      } else {
        callback();
      }
    };
    const checkNew = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (value.length < 6) {
        callback(new Error("新密码不能低于6位数"));
      } else {
        callback();
      }
    };
    return {
      msgNum: 0,
      dateNum: 0,
      msgArr: [],
      noticeArr: [],
      enterprise_name: localStorage.getItem("enterprise_name"),
      real_name: localStorage.getItem("real_name"),
      company_type: localStorage.getItem("company_type"),
      enterprise_logo: localStorage.getItem("enterprise_logo"),
      navArr: [],
      openHeight: 0,
      queryParams: {
        password: "",
        new_password: "",
        again_password: "",
      },
      editPassword: false,
      rules: {
        password: [{ validator: checkOld, required: true, trigger: "blur" }],
        new_password: [
          { required: true, validator: checkNew, trigger: "blur" },
        ],
        again_password: [
          { required: true, validator: checkSure, trigger: "blur" },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    setdef() {
      for (let item of this.navArr) {
        item.active = false;
        for (let key of item.children) {
          key.active = false;
        }
      }
    },
    setCheckLeft() {
      let url = this.$route.path;
      for (let item of this.navArr) {
        for (let key of item.children) {
          if (url.indexOf(key.path) > -1) {
            item.active = true;
            key.active = true;
            this.openHeight = (item.children.length + 1) * 50 + "px";
            break;
          }
        }
      }
    },
    navFn(item) {
      if (!item.active) {
        for (let key of this.navArr) {
          if (item.name === key.name) {
            key.active = true;
            this.openHeight = (item.children.length + 1) * 50 + "px";
          } else {
            key.active = false;
          }
        }
      } else {
        item.active = false;
      }
    },
    listFn(item) {
      this.$router.push({ path: item.path });
    },
    dropFn(id) {
      if (id === 1) {
        this.$router.push({ path: "/comCenter" });
      } else if (id === 2) {
        this.editPassword = true;
      } else if (id === 3) {
        ElMessageBox.confirm("确定退出当前账号?", "退出登录提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          ElMessage({
            type: "success",
            message: "退出成功",
          });
          setTimeout(() => {
            this.$router.push({ path: "/login" });
          }, 1500);
        });
      }
    },
    closeFn() {
      this.editPassword = false;
    },
    async sureEditFn() {
      const valid = await this.$refs.editPwdRef.validate();
      if (!valid) {
        return false;
      }
      const queryData = { ...this.queryParams };
      editPwd(queryData).then((res) => {
        if (res.data.code === 1) {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
          setTimeout(() => {
            this.$router.push({ path: "/login" });
          }, 1000);
        }
      });
    },
    async deleteFn(row) {
      const { data } = await emailNoticeDel({
        enterprise_notice_id: row.enterprise_notice_id,
      });
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        this.getEmailFn();
      }
    },
    getEmailFn() {
      emailNotice().then((res) => {
        if (res.data.code == 1) {
          this.msgArr = res.data.data.data;
          this.msgNum = res.data.data.wd_count;
        }
      });
    },
    getNotice() {
      notice().then((res) => {
        if (res.data.code == 1) {
          this.noticeArr = res.data.data;
        }
      });
    },
    readFn(item) {
      let data = {
        enterprise_notice_id: item.enterprise_notice_id,
      };
      noticeCheckStatus(data).then((res) => {
        if (res.data.code == 1) {
          let path = "";
          if (item.email_type == 1) {
            path = "/comCenter";
          } else if (item.email_type == 2) {
            path = "/staffListDetail";
          } else if (item.email_type == 3) {
            path = "/comCenter";
          } else if (item.email_type == 4) {
            path = "/comCenter";
          } else if (item.email_type == 5) {
            path = "/staffListDetail";
          } else if (item.email_type == 6) {
            path = "/bootSignDetail";
          } else if (item.email_type == 7) {
            path = "/bootSignDetail";
          } else if (item.email_type == 8) {
            path = "/bootSignDetail";
          }
          this.$router.push({ path: path, query: { id: item.account_id } });
        }
      });
    },
    getDateNumFn(data) {
      this.dateNum = data;
    },
    noticeFn(item) {
      this.$router.push({ path: "/artDetail", query: { id: item.article_id } });
    },
    toTalk() {
      this.$router.push({ path: "/homeTalkCenter" });
    },
    interFn(id) {
      this.$emit("inter", id);
    },
  },
  mounted() {},
  async created() {
    let tagArr = JSON.parse(JSON.stringify(routes));
    tagArr.forEach((item) => {
      item.children = item.children.filter((childItem) => {
        return !childItem.isHidden;
      });
    });
    const filterTag = ["Staff"];
    if (localStorage.getItem("company_type") == 2) {
      tagArr = tagArr.filter((item) => {
        return !filterTag.includes(item.name);
      });
    }
    this.navArr = tagArr;
    this.setdef();
    this.setCheckLeft();
    this.getEmailFn();
    this.getNotice();
  },
};
</script>
<template>
  <div class="container">
    <div class="leftNav">
      <div class="leftTop">
        <img src="/img/logo.png" />
      </div>
      <div class="navCont">
        <div class="parentList">
          <div
            :class="item.active ? 'navItem navItemActive' : 'navItem'"
            :key="index"
            v-for="(item, index) in navArr"
          >
            <div
              :class="item.active ? 'navTop_active navTop' : 'navTop'"
              @click="navFn(item)"
            >
              <div class="navItemVal">
                <span :class="'iconfont ' + item.meta.icon"></span>
                {{ item.meta.title }}
              </div>
              <div
                :style="
                  'transform: rotate(' + (!item.active ? '180' : '0') + 'deg)'
                "
                class="openIcon iconfont icon-shouqi"
              ></div>
            </div>
            <div class="childCont">
              <div
                :class="
                  childItem.active ? 'listItem listItemActive' : 'listItem'
                "
                @click="listFn(childItem)"
                :key="childIndex"
                v-for="(childItem, childIndex) in item.children"
              >
                <span :class="'iconfont ' + childItem.meta.icon"></span>
                {{ childItem.meta.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightNav">
      <div class="headCont">
        <div class="headTitle">
          鲸领航-船员招聘企业管理系统({{ enterprise_name }})
        </div>
        <div class="noticeCont">
          <van-notice-bar
            color="#4b58dc"
            background="#fff"
            left-icon="volume-o"
            :scrollable="false"
          >
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :touchable="false"
              :show-indicators="false"
            >
              <van-swipe-item
                @click="noticeFn(item)"
                :key="index"
                v-for="(item, index) in noticeArr"
              >
                <div class="noticeText">{{ item.article_title }}</div>
              </van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </div>
        <div class="headCtrl">
          <div class="userInfo">
            <div class="talkIcon iconfont icon-luntan" @click="toTalk"></div>
            <el-popover placement="bottom" :width="450" trigger="click">
              <template #reference>
                <div class="megCont iconfont icon-youjian1">
                  <div class="msgNum" v-if="msgNum > 0">
                    {{ msgNum <= 99 ? msgNum : "99+" }}
                  </div>
                </div>
              </template>
              <div class="msgMask">
                <div class="noMsg" v-if="msgArr.length == 0">暂无通知信息</div>
                <div
                  class="msgItem"
                  :key="index"
                  v-for="(item, index) in msgArr"
                >
                  <div
                    :class="item.is_read == 1 ? 'msgRed' : 'msgRed isRead'"
                  ></div>
                  <div class="msgName" @click="readFn(item)">
                    {{ item.msg }}
                  </div>
                  <div class="msgTime">{{ item.create_time }}</div>
                  <div
                    class="closeBtn iconfont icon-cuo"
                    @click="deleteFn(item)"
                  ></div>
                </div>
              </div>
            </el-popover>
            <el-popover placement="bottom" :width="400" trigger="click">
              <template #reference>
                <div class="megCont iconfont icon-rili">
                  <div class="msgNum" v-if="dateNum > 0">
                    {{ dateNum <= 99 ? dateNum : "99+" }}
                  </div>
                </div>
              </template>
              <calendar @inter="interFn" @getNum="getDateNumFn"></calendar>
            </el-popover>
            <div class="userImg">
              <img :src="enterprise_logo" />
            </div>
            <el-dropdown trigger="click">
              <div class="userName">
                <span>{{ real_name }}</span>
                <span class="iconfont icon-xiala"></span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="company_type == 1" @click="dropFn(1)">
                    <span class="dropIcon iconfont icon-zhanghuzhongxin"></span>
                    <span>账户中心</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click="dropFn(2)">
                    <span class="dropIcon iconfont icon-xiugaimima1"></span>
                    <span>修改密码</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click="dropFn(3)">
                    <span
                      class="dropIcon iconfont icon-shinshoptuichudenglu"
                    ></span>
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="mainCont">
        <slot></slot>
      </div>
    </div>
    <el-dialog
      v-model="editPassword"
      title="修改账号密码"
      :close-on-click-modal="false"
    >
      <div v-if="editPassword">
        <el-form ref="editPwdRef" :rules="rules" :model="queryParams">
          <el-form-item label-width="120" label="旧密码" prop="password">
            <el-input
              clearable
              v-model="queryParams.password"
              placeholder="请输入旧密码"
            />
          </el-form-item>
          <el-form-item label-width="120" label="新密码" prop="new_password">
            <el-input
              clearable
              type="password"
              v-model="queryParams.new_password"
              placeholder="请输入新密码"
            />
          </el-form-item>
          <el-form-item
            label-width="120"
            label="确认密码"
            prop="again_password"
          >
            <el-input
              clearable
              type="password"
              v-model="queryParams.again_password"
              placeholder="请输入确认密码"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editPassword = false">取消</el-button>
          <el-button type="primary" @click="sureEditFn"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="less">
.container {
  background-color: #4b58dc;
  height: 100vh;
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  .leftNav {
    width: 190px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
    box-sizing: border-box;
    .leftTop {
      margin: 0 auto;
      font-size: 0;
      width: 80px;
      height: 80px;
      background-color: #fff;
      padding: 3px;
      box-sizing: border-box;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .navCont {
      overflow-y: scroll;
      flex: 1;
      height: 10px;
      width: 100%;
      margin-top: 30px;
      padding: 0 15px;
      box-sizing: border-box;
      color: #e3e6ed;

      .parentList {
        width: 100%;
        transition: all 0.3s linear;
        overflow: hidden;
        .navItem {
          width: 100%;
          line-height: 50px;
          box-sizing: border-box;
          cursor: pointer;
          transition: all 0.3s;
          height: 50px;
          overflow: hidden;
          box-sizing: border-box;
          .navTop {
            display: flex;
            box-sizing: border-box;
            align-items: center;
            border-radius: 5px;
            justify-content: space-between;
            padding: 0 15px;
            .openIcon {
              transition: all 0.3s linear;
            }
            .navItemVal {
              .iconfont {
                margin-right: 5px;
              }
            }
          }
          .navTop:hover {
            background-image: linear-gradient(to right;#98a2f8, #6775f4);
          }
          .childCont {
            width: 100%;
            overflow: hidden;
            transition: all 0.3s linear;
            .listItem {
              width: 100%;
              display: flex;
              font-size: 14px;
              padding: 0 15px;
              box-sizing: border-box;
              padding-left: 25px;
              border-radius: 5px;
              .iconfont {
                margin-right: 5px;
                font-size: 16px;
              }
            }
            .listItemActive {
              background-image: linear-gradient(to right;#98a2f8, #6775f4);
            }
            // .listItem:hover {
            //   background-image: linear-gradient(to right;#98a2f8, #6775f4);
            // }
          }
        }
        .navItemActive {
          background-color: #5d6adf;
          border-radius: 7px;
          height: v-bind(openHeight);
        }
      }
    }
  }
  .rightNav {
    width: 100px;
    flex: 1;
    background-color: #f1f3ff;
    border-radius: 30px 0 0 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .headCont {
      height: 60px;
      display: flex;
      justify-content: space-between;
      padding: 0 30px;
      box-sizing: border-box;
      align-items: center;
      background-color: #fff;
      // color: #fff;
      //   box-shadow: 0 0 15px #ddd;
      .headTitle {
        font-size: 18px;
        font-weight: bold;
      }
      .noticeCont {
        flex: 1;
        margin: 0 15px;
        width: 100px;
        .notice-swipe {
          height: 40px;
          line-height: 40px;
        }
        .noticeText {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .headCtrl {
        display: flex;
        align-items: center;
        .iconfont {
          margin-right: 20px;
        }
        .userInfo {
          display: flex;
          align-items: center;
          cursor: pointer;
          .talkIcon {
            font-size: 18px;
            margin-right: 30px;
            color: #333;
          }
          .userImg {
            height: 35px;
            width: 35px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 5px;
            border: 2px solid #4b58dc;
            img {
              width: 100%;
            }
          }
          .userName {
            font-size: 14px;
            margin-left: 5px;
            .iconfont {
              color: #999;
              font-size: 10px;
              margin-left: 5px;
            }
          }
        }
        .megCont {
          color: #999;
          font-size: 25px;
          position: relative;
          margin-right: 30px;
          .msgNum {
            position: absolute;
            right: -12px;
            top: -5px;
            background-color: #f56c6c;
            color: #fff;
            transform: scale(0.8);
            font-size: 12px;
            padding: 0 5px;
            border-radius: 20px;
          }
        }
      }
    }
    .mainCont {
      flex: 1;
      height: 100px;
      overflow: auto;
      border-radius: 20px 0 0 0;
      padding: 20px;
      // background-color: #f1f3ff;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
  }
}
.dropIcon {
  margin-right: 5px;
  font-size: 14px;
}
.msgMask {
  max-height: 300px;
  overflow: auto;
  .noMsg {
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
  }
  .msgItem {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    align-items: center;
    padding: 5px 0;
    .msgRed {
      width: 5px;
      height: 5px;
      background-color: #f56c6c;
      border-radius: 50%;
      margin-right: 5px;
    }
    .isRead {
      background-color: #999;
    }
    .msgName {
      flex: 1;
      width: 100px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      text-decoration: underline;
      cursor: pointer;
      margin-right: 15px;
    }
    .msgName:hover {
      color: #4b58dc;
    }
    .msgTime {
      margin-right: 10px;
    }
    .closeBtn {
      width: 16px;
      height: 16px;
      font-size: 12px;
      background-color: #fff;
      border-radius: 50%;
      cursor: pointer;
      text-align: center;
      line-height: 16px;
    }
    .closeBtn:hover {
      background-color: #ddd;
      color: #666;
    }
  }
}
</style>
<style>
.el-dropdown-menu__item {
  font-size: 13px;
}
.el-dropdown__popper {
  --el-dropdown-menuItem-hover-color: #4b58dc;
  --el-dropdown-menuItem-hover-fill: #f2f3fb;
}
</style>
